<template>
    <view class="l-tabpanel-content">
        <slot></slot>
    </view>
</template>

<script>
export default {
    unicomGroup: ['combined-tabs'],
    data() {
        return {
            isCurrent: false,
            index: 0,
            parent: null
        };
    },
    relations: {
        '../tabs/index': {
            type: 'parent',
            linked: function (t) {
                if (!this.parent) {
                    this.setData({
                        parent: t
                    });
                }
            }
        },
        '../combined-tabs/index': {
            type: 'parent',
            linked: function (t) {
                if (!this.parent) {
                    this.setData({
                        parent: t
                    });
                }
            }
        }
    },
    props: {
        tab: String,
        subTab: String,
        subKey: String,
        key: String,
        icon: String,
        iconSize: {
            type: String,
            default: '20'
        },
        image: Object,
        picPlacement: {
            type: String,
            default: 'top'
        }
    },
    watch: {
        // fix "**" --> "$data"
        $data: {
            deep: true,
            immediate: true,

            handler: function (t) {
                this.updateData(t);
            }
        }
    },
    methods: {
        updateData() {
            let t = this.parent;
            if (t) {
                t.initTabs();
            }
        }
    },
    created: function () {}
};
</script>
<style>
.l-tabpanel-content {
    width: 100%;
    height: 100%;
}
</style>
